<template>
	<view class="content">
		<view class="activeLine">
			<view class="timi">
				<view class="bold">
					{{assay[index]}}
				</view>
				<picker @change="bindPickerChange" :value="index" :range="assay">
					<image class="box3" src="/static/imges/xia.png" mode="widthFix"></image>
				</picker>
				<input class="weui-input" placeholder="输入大厦名称或地点" @click="arrter" placeholder-class="beter" />
			</view>
		</view>

		<view class="all">
			<view class="made">
				<navigator url="StreetShop">
					<view class="banter">
						<image class="aooo" src="../../static/imges/icon3.png" mode=""></image>
						<view class="attbox">
							街铺
						</view>
					</view>
				</navigator>
				<navigator url="OfficeFloor">
					<view class="banter">
						<image class="aooo" src="../../static/imges/icon3.png" mode=""></image>
						<view class="attbox">
							写字楼底铺
						</view>
					</view>
				</navigator>
				<navigator url="Addhome">
					<view class="banter">
						<image class="aooo" src="../../static/imges/icon3.png" mode=""></image>
						<view class="attbox">
							住宅底铺
						</view>
					</view>
				</navigator>

				<navigator url="TheMall">
					<view class="banter">
						<image class="aooo" src="../../static/imges/icon3.png" mode=""></image>
						<view class="attbox">
							商场
						</view>
					</view>
				</navigator>
				<navigator url="LookingRoom">
					<view class="banter">
						<image class="aooo" src="../../static/imges/icon3.png" mode=""></image>
						<view class="attbox">
							投放需求
						</view>
					</view>
				</navigator>
			</view>
		</view>

		<view class="bott">
			<view class="box5">
				<view class="box2">
					热门商圈
				</view>
				<view class="box4"></view>
			</view>
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0" >
					<view id="demo3" class="scroll-view-item_H uni-bg-blue" @click="appur2" v-for="item in shangList" :key="item.id">
						<view class="bue" :style="`background-image: url(${item.url})`">
							<view class="butde"></view>
							<text class="mm__slider">{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
		</view>

		<view class="pong">
			<view class="box5">
				<view class="box2">
					品牌加盟
				</view>
				<view class="box4"></view>
			</view>
			<view class="demoList" @click="appur">
				<text>查看更多</text>
				<image class="headtop" src="../../static/imges/you.png" mode=""></image>
			</view>

		</view>

		<view class="huan">
			<view class="botteer" @click="appurap" v-for="item in brandList" :key="item.id">
				<image class="box" :src="item.zhu_url" mode=""></image>
				<view class="lian">
					<view class="boxatt">{{item.title}}</view>
					<text class="box6" style="margin-left: 10rpx;color: #027FC5;">轻松开店</text><text class="box6" style="margin-left: 20rpx;color: #F8A141;">轻松开店</text>
					<view class="but">
						<view class="boxarr">投资金额</view><text style="font-weight: 600;margin-left: 10rpx;font-size: 26rpx;position: relative;top: 15rpx;">5~6万元</text>
					</view>
				</view>
			</view>
		</view>


		<!-- <tabControl :current="current" :values="items" bgc="#fff" :scrollFlag='true' :isEqually='true' @clickItem="onClickItem"
		 class="butter"></tabControl> -->
		<!-- 使用 swiper 配合 滑动切换 -->
		<view class="pong">
			<view class="box5">
				<view class="box2">
					热门商业
				</view>
				<view class="box4"></view>

			</view>
			<view class="demoList" @click="appurooo">
				<text>更多商铺</text>
				<image class="headtop" src="../../static/imges/you.png" mode=""></image>
			</view>

		</view>
		<view class="guan" @click="parent" v-for="item in buildingList" :key="item.id">
			<image class="box1" :src="item.zhu_url" mode=""></image>
			<view class="bott">
				<view class="buan">
				</view>
				<view class="contont">
					<text>{{item.title}}</text>
					<text style="margin-left: 30rpx;">301人浏览</text>
				</view>

				<view class="demo">
					轻松开店
				</view>
				<view class="box8">
					1-3 万元
				</view>
			</view>
			<image class="ao" src="../../static/imges/dianhua.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import instance from "../../api/requset.js"
	export default {
		components: {},
		data() {
			return {
				assay: ['湖南', '湖北', '浙江'],
				index: 0,
				shangList:[],
				brandList:[],
				buildingList:[]
			};
		},
		onLoad() {
			var that  = this
			var serverUrl = instance.serverUrl
			uni.request({
			    url: serverUrl + '/index.php/api/Index/index', //仅为示例，并非真实接口地址。
			    data: {
			    },
			    success: (res) => {
			        console.log(res.data.data,"首页");
			        this.text = 'request success';
					this.shangList = res.data.data.shang
					this.brandList = res.data.data.brand	
					this.buildingList= res.data.data.building
			    }
			});
			
		},
		methods: {
			onClickItem(val) {
				this.current = val.currentIndex
			},
			scollSwiper(e) {
				this.current = e.target.current
			},
			parent() {
				uni.navigateTo({
					url: './BuildingDetails'
				})
			},
			appur() {
				uni.navigateTo({
					url: './JoinList'
				})
			},
			appurap() {
				uni.navigateTo({
					url: './Details'
				})
			},
			appurooo() {
				uni.navigateTo({
					url: './AddPopular'
				})
			},
			appur2() {
				uni.navigateTo({
					url: './Popular'
				})
			},
			bindPickerChange(e) {
				this.index = e.target.value
			}
		}
	};
</script>

<style>
	.aa{
		display: flex;
	}
	.uni-bg-blue{
		display: flex;
	}
	.activeLine {
		background-color: #104DA1;
		width: 100%;
		height: 200rpx;
	}

	.timi {
		margin-left: 30rpx;
		display: flex;
		background-color: #84A4CE;
		width: 88%;
		height: 70rpx;
		position: relative;
		border-radius: 50rpx;
		bottom: -100rpx;
		z-index: 999;
	}


	.bold {
		line-height: 70rpx;
		width: 70rpx;
		margin-left: 30rpx;
		font-size: 30rpx;
		color: #ccc;
	}

	.box3 {
		width: 35rpx;
		height: 35rpx;
		margin-top: 20rpx;
	}

	.beter {
		font-size: 26rpx;
		color: #fff;
	}

	.weui-input {
		width: 500rpx;
		line-height: 70rpx;
		height: 70rpx;
		font-size: 20rpx;
		background-image: url(../../static/imges/ss2.png);
		background-size: 35rpx 35rpx;
		background-position: 25rpx 20rpx;
		background-repeat: no-repeat;
		padding-left: 70rpx;
	}

	.aooo {
		width: 70rpx;
		height: 70rpx;
	}

	.made {
		display: flex;
		justify-content: space-between;
		margin: 50rpx 30rpx 0 30rpx;
		height: 130rpx;
		border-bottom: 10rpx #F6F6F6 solid;
	}

	.banter {
		text-align: center;
	}

	.attbox {
		font-size: 26rpx;
	}

	.box5 {
		position: relative;
		width: 140rpx;
		top: 30rpx;
		left: 30rpx;
	}

	.box2 {
		color: #164DA1;
		font-weight: 600;
		text-align: center;
	}

	.box4 {
		margin: auto;
		width: 50rpx;
		height: 7rpx;
		margin-top: 7rpx;
		background-image: linear-gradient(to right, rgba(24, 84, 164, 0.7) 55%, rgba(247, 147, 29, 1) 45%);
	}

	.scroll-view_H {
		width: 100%;
		height: 180rpx;
		white-space: nowrap;
		margin-top: 60rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 280rpx;
		height: 170rpx;
	}

	.bue {
		width: 250rpx;
		height: 170rpx;
		border-radius: 10rpx;
		margin-left: 25rpx;
		background-image: url(../../static/imges/details1.png);
		background-repeat: no-repeat;
		background-size: cover;
		z-index: -1;
	}

	.butde {
		width: 250rpx;
		height: 170rpx;
		border-radius: 10rpx;
		background-color: #000;
		opacity: 0.5;
		z-index: 2;
	}

	.mm__slider {
		z-index: 999;
		position: relative;
		top: -60rpx;
		color: #fff;
		margin-left: 10rpx;
	}

	.headtop {
		width: 40rpx;
		height: 40rpx;
		position: relative;
		top: 8rpx;
	}

	.pong {
		display: flex;
		justify-content: space-between;
	}

	.demoList {
		margin: 30rpx 30rpx 0 0;
		font-size: 30rpx;
		color: #A1A1A1;
	}

	.botteer {
		display: flex;
		margin: 50rpx 0 0 10rpx;
	}

	.box {
		width: 130rpx;
		height: 130rpx;
		border-radius: 20rpx;
	}

	.lian {
		width: 240rpx;
		margin-left: 15rpx;
	}

	.box6 {
		position: relative;
		font-size: 8rpx;
		top: 10rpx;
	}

	.boxarr {
		font-size: 13rpx;
		color: #BCBCBC;
		margin-top: 15rpx;
	}

	.but {
		display: flex;
		color: #C92B29;
		margin-top: 10rpx;
	}

	.boxatt {
		font-size: 26rpx;
		font-weight: 600;
	}

	.huan {
		display: flex;
	}

	.butter {
		position: relative;
	}


	.box1 {
		width: 250rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}

	.ao {
		width: 60rpx;
		height: 60rpx;
		margin-top: 130rpx;
	}

	.guan {
		display: flex;
		justify-content: space-between;
		margin: 30rpx 30rpx 0 30rpx;
		height: 240rpx;
		border-bottom: 1rpx solid #E7E7E7;
	}

	.buan {
		font-weight: 600;
		width: 160px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.contont {
		color: #a1a1a1;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.demo {
		margin-top: 20rpx;
		font-size: 18rpx;
		color: #1989C9;
		margin-left: 20rpx;
	}

	.box8 {
		color: #C92B29;
		font-weight: 600;
		margin-top: 20rpx;
	}

	.swiper {
		z-index: -1;
	}
</style>
